import React, { Component } from 'react'
import Tabbar from '../Tabbar/Tabbar'
import styles from './Sort.module.scss'
import axios from '../../axios/axios'
import { Toast,Icon } from 'antd-mobile';
import {withRouter} from 'react-router-dom'

class Sort extends Component {
  constructor(props) {
    super(props)
    this.state = {
      group: this.props.match.params.group * 1,
      sexList: [],
      BooksList: [],
      loading:false
    }
    this.free = 0 //价格
    this.finish = 0 //状态
    this.sortId = 0 //分类
    this.page = 1
    this.refScroll = React.createRef()
    this.totalPage = 0
    this.loading = false
  }
  getSortTitleList(group) {
    this.setState({
      group: group
    })
    axios.post('category?group=' + group + '&gender=').then((res) => {
      this.setState({
        sexList: res.data.firstSorts[0].secondSorts
      })
    })
  }
  getSortBooksList(free,finish,sortId,group, page) {
    axios.post('https://app2.motie.com/category/detail?free='+free+'&finish='+finish+'&group=' + group + '&sortId='+sortId+'&page=' + page + '&pageSize=10').then((res) => {
      this.setState({
        BooksList: [...this.state.BooksList,...res.data.bookList],
        loading : true
      })
      this.totalPage = Math.ceil(res.data.totalPage / 10)
    })

  }
  componentDidMount() {
    this.refScroll.current.addEventListener('scroll', this.handleScroll)
    this.getSortTitleList(this.state.group)
    this.getSortBooksList(this.free,this.finish,this.sortId,this.state.group, this.page)
  }
  handleClick = (group) => {
    this.getSortTitleList(group)
    this.free = 0 //价格
    this.finish = 0 //状态
    this.sortId = 0 //分类
    this.setState({
      BooksList: [],
      loading : false
    })
    this.getSortBooksList(this.free,this.finish,this.sortId,group, this.page)
  }
  componentWillUnmount() {
    this.setState = () => false;
    this.refScroll.current.removeEventListener('scroll', this.handleScroll)
  }
  handleChange = (id) => {
    this.props.history.push('/detailed/' + id)
  }
  handleSortId = (params) => {
    this.free = params[0]
    this.finish = params[1]
    this.sortId = params[2]
    this.setState({
      BooksList: [],
      loading : false
    })
    this.getSortBooksList(this.free,this.finish,this.sortId,this.state.group, this.page)
  }
  
  handleScroll =  ()=> {
    let parentElement = this.refScroll.current;
    let clientHeight = parentElement.clientHeight;//可视区高632
    let scrollHeight = parentElement.scrollHeight;//1154
    let scrollTop = parentElement.scrollTop;//522
    if (scrollHeight - clientHeight - scrollTop < 1 && !this.loading) {
      if (this.page >= this.totalPage) {
        Toast.info('到底了', 1);
        return
      }
      this.page++
      this.loading=true
      this.getSortBooksList(this.free,this.finish,this.sortId,this.state.group, this.page)
      this.loading=false
    }
  }

  render() {
    return (
      <div className={styles.SortBox}>
        <div className={this.state.loading?'hidder':'background'}><Icon type={'loading'}/>加载中...</div>
        {/* 男女分类 */}
        <div className={styles.titleBox}>
          <div className={styles.titlesex}>
            <div className={styles.sexitem} onClick={this.handleClick.bind(this, 1)}>
              <p className={this.state.group === 1 ? styles.active : ''}>男生</p>
            </div>
            <div className={styles.sexitem} onClick={this.handleClick.bind(this, 2)}>
              <p className={this.state.group === 2 ? styles.active : ''}>女生</p> </div>
          </div>
        </div>
        {/* 中间 */}
        <div className={styles.center} ref={this.refScroll}>
          <div className={styles.nav}>
            <div className={styles.cate}>
              <div className={styles.left}>分类</div>
              <div className={styles.right}>
                <span className={this.sortId===0?styles.activeitem:''} onClick={this.handleSortId.bind(this,[this.free,this.finish,0])}>全部</span>
                {this.state.sexList.map((v) => {
                  return <span className={this.sortId===v.secondId?styles.activeitem:''} key={v.secondId} onClick={this.handleSortId.bind(this,[this.free,this.finish,v.secondId])}>
                    {v.secondTitle}
                  </span>
                })}
              </div>
            </div>
            <div className={styles.cate}>
              <div className={styles.left}>状态</div>
              <div className={styles.right}>
                <span className={this.finish===0?styles.activeitem:''} onClick={this.handleSortId.bind(this,[this.free,0,this.sortId])}>全部</span>
                <span className={this.finish===1?styles.activeitem:''} onClick={this.handleSortId.bind(this,[this.free,1,this.sortId])}>完结</span>
                <span className={this.finish===2?styles.activeitem:''} onClick={this.handleSortId.bind(this,[this.free,2,this.sortId])}>连载</span>
              </div>
            </div>
            <div className={styles.cate}>
              <div className={styles.left}>状态</div>
              <div className={styles.right}>
                <span className={this.free===0?styles.activeitem:''} onClick={this.handleSortId.bind(this,[0,this.finish,this.sortId])}>全部</span>
                <span className={this.free===1?styles.activeitem:''} onClick={this.handleSortId.bind(this,[1,this.finish,this.sortId])}>免费</span>
                <span className={this.free===2?styles.activeitem:''} onClick={this.handleSortId.bind(this,[2,this.finish,this.sortId])}>付费</span>
              </div>
            </div>
          </div>
          {/* 书籍列表 */}
          <div className={styles.items}>
            {this.state.BooksList&&this.state.BooksList.map((v) => {
              return <div key={v.id} className={styles.item}>
                <img onClick={this.handleChange.bind(this, v.id)} src={v.icon} alt="" />
                <div className={styles.item_left}>
                  <h3>{v.name} </h3>
                  <p> {v.recommend} </p>
                  <div className={styles.ext}>
                    <p>{v.authorName}</p>
                    <p>
                      {
                        v.bookTags && v.bookTags.map((vv, i) => {
                          return <span key={i}>{vv} </span>
                        })
                      }
                    </p>
                  </div>
                </div>
              </div>
            })}
          </div>
        </div>
        <Tabbar group={this.state.group}></Tabbar>
      </div>
    )
  }
}

export default withRouter(Sort);
